<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="任务管理系统登录入口">
    <title>用户登录 - 任务管理系统</title>

    <!-- Font Awesome：用于密码显隐、提示图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind CSS：用于样式开发 -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f2ff',
                            500: '#667eea',
                            600: '#556cd6'
                        },
                        danger: {
                            50: '#fff5f5',
                            500: '#dc3545'
                        },
                        neutral: {
                            100: '#f8f9fa',
                            200: '#e9ecef',
                            500: '#6c757d',
                            700: '#495057'
                        },
                        success: {
                            50: '#f0fff4',
                            600: '#22c55e'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/css">
        @layer utilities {
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-effect {
                @apply transition-all duration-200 hover:scale-[1.02] active:scale-[0.98];
            }
            .input-label {
                @apply absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500 transition-all duration-200
                peer-focus:top-0 peer-focus:text-primary-500 peer-focus:text-sm
                peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:text-sm;
            }
            .fade-in {
                animation: fadeIn 0.4s ease-out forwards;
            }
            .spin-icon {
                animation: spin 1s linear infinite;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
    </style>
</head>
<body class="flex items-center justify-center p-4 font-inter">

<!-- 登录卡片 -->
<div class="w-full max-w-md bg-neutral-100 rounded-2xl shadow-md overflow-hidden card-hover fade-in">
    <div class="h-1.5 bg-gradient-to-r from-primary-500 to-primary-600"></div>

    <div class="p-6 md:p-8">
        <!-- 标题区 -->
        <div class="text-center mb-8 fade-in" style="animation-delay: 0.1s">
            <div class="w-12 h-12 mx-auto mb-4 bg-primary-50 rounded-full flex items-center justify-center text-primary-500">
                <i class="fa fa-user-o text-xl"></i>
            </div>
            <h2 class="text-[clamp(1.4rem,3vw,1.6rem)] font-bold text-neutral-700">用户登录</h2>
            <p class="text-neutral-500 text-sm mt-1">请输入账号信息，访问任务管理系统</p>
        </div>

        <!-- 登录表单 -->
        <form th:action="@{/login}" method="post" id="loginForm" class="space-y-5 fade-in" style="animation-delay: 0.2s">

            <!-- 用户名输入框 -->
            <div class="relative">
                <!-- 占位符留空，用于触发标签动画 -->
                <!-- 回显提交的用户名 -->
                <input
                        type="text"
                        id="username"
                        name="username"
                        required
                        placeholder=" "
                        class="w-full h-11 px-3 py-2 border border-neutral-200 rounded-lg
                           focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20
                           transition-all duration-200 peer bg-transparent"
                        th:value="${param.username != null ? param.username : ''}"
                >
                <label for="username" class="input-label">用户名</label>
                <i class="fa fa-user-o absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 text-sm"></i>
            </div>

            <!-- 密码输入框 -->
            <div class="relative">
                <!-- 占位符留空，用于触发标签动画 -->
                <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        placeholder=" "
                        class="w-full h-11 px-3 py-2 border border-neutral-200 rounded-lg
                           focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20
                           transition-all duration-200 peer bg-transparent"
                >
                <label for="password" class="input-label">密码</label>
                <button
                        type="button"
                        id="togglePwd"
                        class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-primary-500 transition-colors"
                >
                    <i class="fa fa-eye-slash text-sm"></i>
                </button>
            </div>

            <!-- 忘记密码 -->
            <div class="flex justify-end">
                <a href="#" class="text-xs text-primary-500 hover:text-primary-600 transition-colors">
                    忘记密码？
                </a>
            </div>

            <!-- 登录按钮 -->
            <button
                    type="submit"
                    class="w-full h-11 bg-primary-500 text-white font-medium rounded-lg
                       hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
                       btn-effect flex items-center justify-center"
                    id="loginBtn"
            >
                <span id="btnText">登录</span>
                <i class="fa fa-spinner spin-icon ml-2 hidden" id="loadingIcon"></i>
            </button>

            <!-- 错误提示 -->
            <div th:if="${error != null}" class="error-message bg-danger-50 border-l-4 border-danger-500
                                               text-danger-500 p-2.5 rounded-r-lg text-sm fade-in">
                <div class="flex items-center gap-2">
                    <i class="fa fa-exclamation-circle text-xs"></i>
                    <span th:text="${error}">用户名或密码错误，请重试</span>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 页脚 -->
<footer class="fixed bottom-4 left-0 right-0 text-center text-white/70 text-xs fade-in" style="animation-delay: 0.3s">
    <p>© 2024 任务管理系统 | 高效管理您的任务</p>
</footer>

<!-- 核心交互脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码显隐功能
        const togglePwdBtn = document.getElementById('togglePwd');
        const passwordInput = document.getElementById('password');
        if (togglePwdBtn && passwordInput) {
            togglePwdBtn.addEventListener('click', function() {
                const isPwdHidden = passwordInput.type === 'password';
                passwordInput.type = isPwdHidden ? 'text' : 'password';
                const icon = togglePwdBtn.querySelector('i');
                icon.className = isPwdHidden ? 'fa fa-eye text-sm' : 'fa fa-eye-slash text-sm';
            });
        }

        // 表单提交状态处理
        const loginForm = document.getElementById('loginForm');
        const loginBtn = document.getElementById('loginBtn');
        const btnText = document.getElementById('btnText');
        const loadingIcon = document.getElementById('loadingIcon');
        if (loginForm && loginBtn && btnText && loadingIcon) {
            loginForm.addEventListener('submit', function() {
                loginBtn.disabled = true;
                btnText.textContent = '登录中...';
                loadingIcon.classList.remove('hidden');
            });
        }

        // 错误提示自动隐藏
        const errorMessage = document.querySelector('.error-message');
        if (errorMessage) {
            document.getElementById('username')?.focus();
            setTimeout(() => {
                errorMessage.style.opacity = '0';
                errorMessage.style.height = '0';
                errorMessage.style.padding = '0';
                errorMessage.style.margin = '0';
                errorMessage.style.overflow = 'hidden';
            }, 3000);
        } else {
            document.getElementById('username')?.focus();
        }

        // 登出提示
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('logout')) {
            const loginCard = document.querySelector('.card-hover');
            if (loginCard) {
                const logoutMsg = document.createElement('div');
                logoutMsg.className = 'bg-success-50 border-l-4 border-success-600 text-success-600 p-2.5 rounded-r-lg text-sm mb-5 fade-in';
                logoutMsg.innerHTML = '<div class="flex items-center gap-2"><i class="fa fa-check-circle text-xs"></i><span>已成功登出系统</span></div>';

                const contentArea = loginCard.querySelector('div[class*="p-6"]');
                if (contentArea) {
                    loginCard.insertBefore(logoutMsg, contentArea);
                    setTimeout(() => {
                        logoutMsg.style.opacity = '0';
                        setTimeout(() => logoutMsg.remove(), 400);
                    }, 3000);
                }
            }
        }
    });
</script>
</body>
</html>
